<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="/static/component/pear/css/pear.css" />
    <link rel="stylesheet" href="/static/admin/css/iconfont/iconfont.css">
    <link rel="stylesheet" href="/static/component/jqFullCalendar/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="/static/component/jqFullCalendar/css/fullcalendar.css" />
    <script src="/static/component/layui/layui.js"></script>
    <script src="/static/component/pear/pear.js"></script>
    <style>
        .car_number{
            height: 35px;
            line-height: 35px;
            text-align: center;
            background: #1E9FFF;
            color: #fff;
            width: 100px;
            margin: 0 auto;
        }
        .active{
            border: 1px solid #36b368;
        }
        .clear{ clear:both}
        .fc-state-default{
            color: rgb(255, 255, 255);
            border: 1px solid #36b368;
            background-color: #36b368;
        }
        .fc-state-active{
            border: 1px solid #009933;
            background-color: #009933;
        }
        .fc-event, .fc-event-dot {
            background-color: #36b368;
        }
        .fc-event{
            border:1px solid #36b368;
        }
    </style>
</head>
<body class="pear-container">
<div class="layui-card">
    <div class="layui-card-body">
        <button class="pear-btn pear-btn-primary pear-btn-md" id="add">
            <i class="layui-icon layui-icon-add-1"></i>
            提交申请
        </button>
    </div>
</div>
<div class="layui-card">
    <div class="layui-card-body">
        {foreach name="car" item="vo"}
        <div class="layui-col-md2 ew-datagrid-item car-tab" style="margin-left: 5px;margin-top: 5px;" data-id="{$vo['id']}">
            <div class="project-list-item">
                <div class="project-list-item-body">
                    <div class="car_number">{$vo['car_number']}</div>
                    <div class="project-list-item-text layui-text" style="margin-top: 10px">
                        <span class="iconfont icon-{$vo['car_type']}"></span>  {$car_type[$vo['car_type']]}
                        &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;可乘坐： {$vo['passengers']} 人
                    </div>
                    <div class="project-list-item-desc">
                        <span class="time">状态</span>
                        <div class="ew-head-list">
                            {if $vo['status'] == 1}
                            <span style="color:#36b368"> {$status[$vo['status']]}</span>
                            {else/}
                            <span style="color:#FF5722"> {$status[$vo['status']]}</span>
                            {/if}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {/foreach}
        <div class="clear"></div>
    </div>
</div>
<div class="layui-card">
    <div class="layui-card-body">
        <div id="calendar"></div>
    </div>
</div>

<div id="detail" style="display: none">
    <div class="project-list-item-body">
        <table class="layui-table">
            <tbody>
                <tr>
                    <td style="width: 100px">车牌</td>
                    <td id="car_number"></td>
                </tr>
                <tr>
                    <td style="width: 100px">车型</td>
                    <td id="car_type"></td>
                </tr>
                <tr>
                    <td style="width: 100px">可乘坐</td>
                    <td id="number"></td>
                </tr>
                <tr>
                    <td style="width: 100px">用车人数</td>
                    <td id="use_number"></td>
                </tr>
                <tr>
                    <td style="width: 100px">出发地</td>
                    <td id="start"></td>
                </tr>
                <tr>
                    <td style="width: 100px">目的地</td>
                    <td id="end"></td>
                </tr>
                <tr>
                    <td style="width: 100px">使用日期</td>
                    <td id="date"></td>
                </tr>
                <tr>
                    <td style="width: 100px">事由</td>
                    <td id="reason"></td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<script type="text/javascript" src="/static/component/jqFullCalendar/js/jquery-1.9.1.min.js" ></script>
<script type="text/javascript" src="/static/component/jqFullCalendar/js/bootstrap.min.js" ></script>
<script type="text/javascript" src="/static/component/jqFullCalendar/js/moment.min.js" ></script><!-- 日期处理时间工具 -->
<script type="text/javascript" src="/static/component/jqFullCalendar/js/fullcalendar.min.js" ></script>
<script>

    let carType = {$carType|raw};
    let car_id = 0;
    function reload() {
        $('#calendar').fullCalendar('refetchEvents');
    }

    initCalendar();

    function initCalendar() {
       $('#calendar').fullCalendar({
            header: {
                left: 'prev,next, today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay,listMonth'
            },
            locale: 'zh-cn',
            titleFormat: "Y年M月",
            timeFormat: 'HH:mm',
            buttonText: {
                today: '今天',
                month: '月',
                agendaWeek: '周',
                agendaDay: '日',
                listMonth: '日程',
            },
            monthNames: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
            monthNamesShort: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
            dayNames: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
            dayNamesShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
            noEventsMessage : "当月无数据",
            allDayText: "全天",
            allDaySlot: false,
            slotDuration : "00:30:00",
            slotLabelFormat : "H(:mm)a",
            slotLabelInterval : "01:00:00",
            snapDuration : "01:00:00",
            firstDay: 1,
            hiddenDays: [],
            weekends: true,
            weekMode: 'fixed',
            weekNumbers: false,
            weekNumberCalculation: 'iso',
            height: 800,
            handleWindowResize: true,
            defaultView: 'month',
            defaultDate: '{:date("Y-m-d")}',
            nowIndicator: true,
            eventLimit: false,
            eventLimitText: "更多",
            dayPopoverFormat : "YYYY年M月d日",
            events: function(start,end,timezone, callback) {
               var date = this.getDate().format('YYYY-MM');
               $.ajax({
                   url: '',
                   method: 'post',
                   dataType: 'json',
                   data: {
                       car_id: car_id,
                       date: date,
                   },
                   success: function(json) { // 获取当前月的数据
                       var events = [];
                       if (json.code == 0) {
                           $.each(json.data, function(k, v) {
                               events.push({
                                   car_number: v.car_number,
                                   car_type: carType[v.car_type],
                                   passengers: v.passengers,
                                   people_num: v.people_num,
                                   start_area: v.start_area,
                                   end_area: v.end_area,
                                   start_time: v.start,
                                   end_time: v.end,
                                   reason: v.reason,
                                   title: v.car_number + ' ' + v.admin_name,
                                   start: v.start,
                                   end: v.end,
                                   url: "JavaScript:;",
                                   className: "green"
                               });
                           });
                       }
                       callback(events);
                   }
               });
           },
           eventClick: function(event, jsEvent) {
                layui.use('layer', function () {
                    var layer = layui.layer;

                    console.log(event);

                    $('#car_number').text(event.car_number);
                    $('#car_type').text(event.car_type);
                    $('#number').text(event.passengers);
                    $('#use_number').text(event.people_num);
                    $('#start').text(event.start_area);
                    $('#end').text(event.end_area);
                    $('#date').text(event.start_time + ' 至 ' + event.end_time);
                    $('#reason').text(event.reason);

                    layer.open({
                        type: 1,
                        title: '内容详情',
                        area: ['500px', '500px'],
                        content: $("#detail").html()
                    });
                });
            },
            selectable: true,
            selectHelper: true,
            selectMirror: true,
            selectOverlap : false,
            lazyFetching : true,
            defaultTimedEventDuration : "02:00:00",
            defaultAllDayEventDuration : { days: 1 },
            editable: true,
            dragOpacity:0.2,
            dragScroll : true,
            eventOverlap : true,
            eventConstraint : {
                dow: [ 1, 2, 3, 4, 5, 6, 0 ]
            },
            longPressDelay : 1000,
        });
    }

    $("#add").click(function () {
        layui.use('layer', function () {
            var layer = layui.layer;

            layer.open({
                type: 2,
                maxmin: true,
                title: '预约申请',
                shade: 0.1,
                area: ['60%', '80%'],
                content: '{$Request.root}/admin.car/doSubscribe'
            });
        });
    });

    $(".car-tab").click(function () {
        $(this).addClass('active').siblings().removeClass('active');
        car_id = $(this).attr('data-id')
        $('#calendar').fullCalendar('refetchEvents');
    });
</script>
</body>
</html>
